<template>
	<view>
		<view class="top-text">编辑收货地址</view>
		<view class="add-box" >
			<view class="one-box" >
				<view class="name">收货人：</view>
				<input placeholder="姓名" type="text" v-model="uname" maxlength="20" style="text-align: left;" />
			</view>
			<view class="one-box" >
				<view class="name">联系电话：</view>
				<input placeholder="手机号" v-model="tel" type="number" maxlength="11" style="text-align: left;" />
			</view>
			<view class="one-box" >
				<view class="name">省市区：</view>
				<picker @change="bindPickerChange" mode = region :value="index" :range="array">
					<view class="uni-input">{{array[0]}}-{{array[1]}}-{{array[2]}}</view>
				</picker>
			</view>
			<view class="one-box">
				<view class="name">详细地址：</view>
				<input  placeholder="精确到小区/乡村" v-model="addr"/>
			</view>
			<view class="btn" @click="Jump()">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index:0,
				array:['请选择','省','市区'],
				uname:'',
				tel:'',
				addr:''
			}
		},
		onLoad() {
		},
		methods: {
			bindPickerChange: function(e) {
				this.array = e.detail.value
			},
			Jump(){
				let that = this
				console.log(that.addr + that.array)
				uniCloud.callFunction({
					name:'addAddress',
					data:{
						name:that.uname,
						tel:that.tel,
						addr:that.array+that.addr
					},
					success: (rest) => {
						console.log('添加地址成功')
						uni.showToast({
							title: '添加地址成功',
							duration: 2000,
							icon:'none'
						});
						setTimeout( () => {
						  uni.redirectTo({
						  	url:'./address-list'
						  })	
						}, 1000)
					},
					fail: (err) => {
						console.log('添加地址成功失败',err)
					}
				})
	
				}
			
		}
	}
</script>

<style scoped lang="scss">
	.top-text{
		background-color: #F6F7FB;
		padding: 30rpx 0rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		line-height: 40rpx;
		color: #000000;
		opacity: 1;
	}
	.add-box{
		height: 89vh;
		padding:20rpx 94rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction:column;
		position: relative;
		}
	.one-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1rpx solid #E2E2E2;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 38rpx;
		color: #8A8A8A;
		opacity: 1;
		padding: 30rpx 0rpx;
		}
	.name{
		font-size: 28rpx;
		font-weight: 600;
		line-height: 38rpx;
		color: #000000;
		opacity: 1;
		width: 160rpx;
		text-align: left;
		}
	.btn{
		position: absolute;
		bottom: 60rpx;
		left: 94rpx;
		right: 94rpx;
		padding: 20rpx 0rpx;
		background: #ff6633;
		opacity: 1;
		border-radius: 40rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 48rpx;
		color: #FFFFFF;
		opacity: 1
		}	
</style>
